body {
  margin: 0;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  background-color: aliceblue;
  gap: 15px;
}

.wave {
  width: 600px;
  height: 200px;
  outline: 2px dashed gray;
  --c: #2196f3;
  --w1: radial-gradient(100% 57% at top, transparent 100%, var(--c) 100.5%)
    no-repeat;
  --w2: radial-gradient(100% 57% at bottom, var(--c) 100%, transparent 100.5%)
    no-repeat;
  background: var(--w1), var(--w2), var(--w1), var(--w2);
  background-position-y: 100%;
  background-size: 50.5% 100%;
  background-position-x: -200%, -100%, 1%, 100%;
  animation: waveMove 2s linear infinite;
}
.wave.text {
  background: radial-gradient(100% 57% at top, transparent 100%, var(--c) 100.5%) no-repeat, radial-gradient(100% 57% at bottom, var(--c) 100%, transparent 100.5%) no-repeat, radial-gradient(100% 57% at top, transparent 100%, var(--c) 100.5%) no-repeat, radial-gradient(100% 57% at bottom, var(--c) 100%, transparent 100.5%) no-repeat;
  background-position-y: 100%;
  background-size: 50.5% 100%;
  background-position-x: -200%, -100%, 1%, 100%;
  animation: waveMove 2s linear infinite;
  font-size: 100px;
  font-weight: bold;
  color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-stroke: 2px var(--c);
}
@keyframes waveMove {
  0% {
    background-position-x: -200%, -100%, 1%, 100%;
  }
  100% {
    background-position-x: 1%, 100%, 200%, 300%;
  }
}